<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted,
		onUnmounted,
		nextTick
	} from 'vue'
	import {
		back,
		jumpTo
	} from '@/utils/common.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import http from '@/api/roomAPI.js'


	const instance = getCurrentInstance()

	const data = reactive({
		article: `
	<p>大多数人都是唯我独尊的牺牲品
        </p><p>
永远不要高估人们对于价值的辨别能力，也永远不要低估人们的傻逼程度。</p>
<p></p>
为什么是唯我独尊的牺牲品因为他们会沾沾自喜的拒绝一切有代价的好处
人如何分三六九等？
不赚六等人和九等人的钱，只赚三等和三等以上的人的钱，做这种梦的人也是愚蠢的，你的流量无法精
准触达

在你一开始成本有限的时候，你即使装，但装也是需要成本的，而且你唬不住三等以上的人


三等以上的人属于另一个阶级，那你是一个创业者，你的确是有一项义务是博得另一个阶级对你的刮目
相看，但是你在大多数时间你面对的是什么？你的前期、中期现金流来自于什么？


你一定要想清楚，是三等以下的啊，先做到别妄想，因为四五等阶级的都会很少，甚至六等的也不多，
而六等以下的会越来越多到九等是最多的，那你怎么赚他们的钱？那怎么区分？他们身上有什么特性？
毕竟大多数人是九等。
	`,
		courseInfo: {},

		richTextList: [],
		// mainContent: "",

		// webviewUrl: ""

		isFirst: false,

		isVideoPlay: false,
		isVideoPause: false,

		days: 0,

		scrollTop: 0,
		old: {
			scrollTop: 0
		},


		page: 1,
		id: 0,
		list: [],
		total: 0,

		videoGuid: generateRandomString(10),

		audioPause: true
	})

	// let paging = ref(null);

	// async function queryList(pageNo, pageSize) {
	// 	// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
	// 	// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
	// 	// 模拟请求服务器获取分页数据，请替换成自己的网络请求
	// 	const params = {
	// 		pageNo: pageNo,
	// 		pageSize: pageSize,
	// 	}

	// 	const res = await http.curriculumPicture(data.id, pageNo).catch(res => {

	// 		// 如果请求失败写this.$refs.paging.complete(false);
	// 		// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
	// 		// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
	// 		paging.value.complete(false);
	// 	})

	// 	data.total = res.data.total;

	// 	// 将请求的结果数组传递给z-paging
	// 	paging.value.complete(res.data.data);

	// 	// this.$request.queryChatList(params).then(res => {
	// 	// 	// 将请求的结果数组传递给z-paging
	// 	// 	this.$refs.paging.complete(res.data.list);
	// 	// }).catch(res => {
	// 	// 	// 如果请求失败写this.$refs.paging.complete(false);
	// 	// 	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
	// 	// 	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
	// 	// 	this.$refs.paging.complete(false);
	// 	// })
	// }


	const scroll = (e) => {
		data.old.scrollTop = e.detail.scrollTop
	}


	const goTop = () => {
		// 解决view层不同步的问题
		data.scrollTop = data.old.scrollTop
		nextTick(function() {
			data.scrollTop = 0
		});
	}

	const scrolltolower = async (e) => {
		data.page++;
		await loadData()
	}

	const loadData = async () => {

		const res = await http.curriculumPicture(data.id, data.page)

		data.total = res.data.total;

		if (data.page > 1) {
			data.list = data.list.concat(res.data.data);
		} else {
			data.list = res.data.data;
		}
	}


	async function courseInfo(id) {

		const res = await http.courseInfo(id)
		// console.log('🚀 ~ courseCate ~ res:', res)
		data.courseInfo = res.data
		// console.log('🚀 ~ courseList ~ data.courseList:', data.courseList)

		// data.audioList.push({
		// 	title: '',
		// 	epname: '',
		// 	singer: '',
		// 	image: '',
		// 	fileUrl: data.courseInfo.audio_url
		// })

		// console.log(data.audioList)
		// .replace(/\<img/g, "<img style='width: 100%;'")

		// data.mainContent = `<embed src="${data.courseInfo.details}" type="application/pdf" width="100%" height="100%"></embed>` 


		// let str = data.courseInfo.details

		// if (str) {

		// 	const srcRegex = /<img\s+(?:[^>]*?\s+)?src\s*=\s*(["'])((?:[^\1"]|\\\1|.)*?)\1/g
		// 	const result = [...str.matchAll(srcRegex)]
		// 	data.richTextList = result.map(v => v[2])
		// 	// console.log(imgSrcs)

		// 	// for (let i = 0; i < arr.length; i++) {
		// 	// 	let src = arr[i].match(srcReg);
		// 	// 	if (src[1]) {
		// 	// 		data.richTextList.push(src[1])
		// 	// 	}
		// 	// }


		// 	// let imgReg =  /<img.*?src=[\"|']?(.*?)[\"|']?\s.*?>/i;
		// 	// let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i

		// 	// let arr = str.match(imgReg);

		// 	// console.log(arr);

		// 	// for (let i = 0; i < arr.length; i++) {
		// 	// 	let src = arr[i].match(srcReg);
		// 	// 	if (src[1]) {
		// 	// 		data.richTextList.push(src[1])
		// 	// 	}
		// 	// }
		// }



	}

	// const handleMessage = (e) => {
	// 	console.log(e, '---------------eeeeeeeee');
	// 	let action = ''
	// 	let data = {}
	// 	// #ifdef H5
	// 	data = e.data
	// 	action = data?.type || 'Back'
	// 	// #endif
	// 	// #ifdef APP-PLUS
	// 	data = e.detail?.data?.[0]
	// 	action = data?.type || 'Back'
	// 	// #endif
	// 	// #ifdef MP-WEIXIN
	// 	data = e.detail?.data?.[0]
	// 	action = data?.type || 'Back'
	// 	// #endif
	// 	// data.signUrl = 'http://oss.hfjpxh.com/pdf/c1e74396f420463edd223745a67377f.pdf'
	// 	console.log(action, '---------------data');
	// 	if (action === 'Back') {
	// 		back()
	// 	}
	// }

	// const getEnv = () => {
	// 	// #ifdef MP-WEIXIN
	// 	return 'MP-WEIXIN'
	// 	// #endif
	// 	// #ifdef APP-PLUS
	// 	return 'APP-PLUS'
	// 	// #endif
	// 	// #ifdef H5
	// 	return 'H5'
	// 	// #endif
	// }

	onLoad(async (options) => {

		data.days = +options.days

		data.id = +options.id;

		await courseInfo(data.id)

		await loadData()

		// //实例化
		// var pdfh5 = new Pdfh5("#demo", {
		// 	pdfurl: "../../static/test.pdf",
		// 	// cMapUrl:"https://unpkg.com/pdfjs-dist@3.8.162/cmaps/",
		// 	// responseType: "blob" // blob arraybuffer
		// });
		// //监听完成事件
		// pdfh5.on("complete", function(status, msg, time) {
		// 	console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
		// 	//禁止手势缩放
		// 	pdfh5.zoomEnable(false);
		// })

		// // #ifdef H5
		// window.onmessage = handleMessage
		// // #endif
		// // #ifdef APP-PLUS | MP-WEIXIN
		// platform.value = uni.getSystemInfoSync().platform;
		// console.log(platform, '---------platform');
		// if (platform.value !== 'ios') {
		// 	getSystemInfo()
		// }
		// // #endif
		// const parseObj = options.obj && JSON.parse(options.obj)
		// const pageUrl = parseObj?.path || ''
		// const env = getEnv()

		// const token = authUserStore.getToken || ''
		// webviewUrl.value =
		// `${WebviewBaseUrl}${pageUrl}?obj=${obj}&token=${token}&baseURL=${baseURL}&isencrypt=${isencrypt}&version=${version}&env=${env}`

		// const res = await http.courseInfo(options.id)

		// // console.log('🚀 ~ courseCate ~ res:', res)
		// const parseObj = res.data

		// const obj = JSON.stringify({
		// 	...parseObj,
		// 	env
		// })
		// const token = uni.getStorageSync('token')
		// data.webviewUrl = `https://www.ivmcr.com/#/pages/pdf/index?id=${options.id}&token=${token}&env=${env}`;

		// console.log(data.webviewUrl)
	})

	// // 配置
	// const dispositionObj = ref({
	// 	id:'',
	// 	pdfUrl:'/static/cs.pdf',//默认加载的pdf
	// 	isSign:false,//是否需要签名按钮
	// 	env:'',//打开标注的平台
	// 	inside:false,
	// })

	// const pdfh5DOM = ref()
	// const initpdf = ()=> {
	// 	pdfh5DOM.value = new Pdfh5('#demo', {
	// 		cMapUrl:'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/',
	// 		pdfurl: dispositionObj.value?.pdfUrl, // pdf 地址，请求的地址需要为线上的地址，测试的本地的地址是不可以的
	// 		// lazy: true, // 是否懒加载
	// 		withCredentials: true,
	// 		// renderType: "svg",
	// 		maxZoom: 3, //手势缩放最大倍数 默认3
	// 		scrollEnable: true, //是否允许pdf滚动
	// 		zoomEnable: true, //是否允许pdf手势缩放
	// 	});
	// 	pdfh5DOM.value.on("ready", function() {
	// 		console.log("pdf准备开始渲染，总页数：" + this.totalNum)
	// 	})
	// 	//监听完成事件
	// 	pdfh5DOM.value.on("complete", function(status, msg, time) {
	// 		console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum);
	// 	});
	// }

	// onShow(() => {

	// 	uni.setNavigationBarColor({
	// 		frontColor: '#000', // 前景色值，包括按钮、标题、状态栏的颜色
	// 		backgroundColor: '#fff', // 背景颜色值，包括状态栏背景颜色              
	// 	});
	// })

	// const platform = ref('')

	// const webviewStyles = ref({
	// 	top: 0,
	// 	height: null
	// })

	// 获取屏幕信息
	// const getSystemInfo = () => {
	// 	uni.getSystemInfo({
	// 		success: ({
	// 			screenHeight,
	// 			statusBarHeight
	// 		}) => {
	// 			webviewStyles.value.top = statusBarHeight
	// 			webviewStyles.value.height = screenHeight - statusBarHeight
	// 		}
	// 	});
	// }

	function preventSave(event) {
		// 阻止长按触发保存图片
		// console.log('图片长按被禁止');
	}



	// const bgMusic = wx.getBackgroundAudioManager()

	// function listeverButtonPlay(){

	// 	if(data.isFirst){
	// 		console.log(111)
	// 	} else{

	// 		bgMusic.title = '致爱丽丝';
	// 		bgMusic.epname = '专辑名';
	// 		// bgMusic.singer = '歌手名';
	// 		// bgMusic.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';

	// 		bgMusic.src=data.courseInfo.audio_url
	// 		// console.log(222)
	// 	}
	// }

	// const bgPlayer = ref(null);

	const onPause = (e) => {
		// data.isideoPause = true;
		// console.log(e)
		// data.isVideoPlay = false;
	}

	const onPlay = () => {

		//如果音频没有暂停 则暂停音频
		// if (data.audioPause == false) {
		// 	//暂停音频
		// 	if (bgPlayer.value) {
		// 		bgPlayer.value.onPause();
		// 		data.audioPause = true;
		// 	}
		// }

		// data.isVideoPause = false;
	}

	const onEnded = () => {
		// data.isVideoPause = true;
	}

	const videoPlay = (guid) => {



		// videoContext.requestFullScreen({
		// 	direction: 0
		// });


		nextTick(() => {
			data.isVideoPlay = true;

			let videoContext = uni.createVideoContext(guid, instance); // this这个是实例对象 必传
			videoContext.play();
		})

		//暂停音频
		// if (bgPlayer.value) {
		// bgPlayer.value.onPause();
		// }
	}

	function videoOnPlay() {
		console.log("视频开始11")

		nextTick(() => {
			const bgMusic = uni.getBackgroundAudioManager()
			if (!bgMusic.paused) {
				bgMusic.pause();
				console.log("音频暂停11")
			}
		})

	}

	function videoOnEnded() {
		nextTick(() => {
			data.isVideoPlay = false
		})

	}

	function videoOnPause() {
		// console.log("视频暂停111")
		// const bgMusic = uni.getBackgroundAudioManager()

		// nextTick(()=>{
		// 	if (!bgMusic.paused) {
		// 		bgMusic.pause();
		// 		console.log("音频暂停111")
		// 	}
		// })

	}

	function audioOnPlay() {
		console.log("音频开始22")

		nextTick(() => {
			let videoContext = uni.createVideoContext(data.videoGuid, instance);
			if (videoContext && !videoContext.paused) {


				videoContext.pause();
				console.log("视频暂停22")
			}
		})

	}

	function audioOnPause() {
		console.log("音频暂停222")
		let videoContext = uni.createVideoContext(data.videoGuid, instance);

		nextTick(() => {
			if (videoContext && !videoContext.paused) {
				videoContext.pause();

				console.log("视频暂停222")
			}
		})

	}

	function screenChange(e) {
		let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
		// console.log(e, "全屏");
		if (!fullScreen) {
			//退出全屏
			data.isVideoPlay = false; // 隐藏播放盒子
		} else {

		}
	}

	function goBack() {
		jumpTo("/pages/room/depth?days=" + data.days)
	}

	function generateRandomString(length) {
		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
		let result = '';
		for (let i = 0; i < length; i++) {
			const randomIndex = Math.floor(Math.random() * characters.length);
			result += characters[randomIndex];
		}
		return result;
	}


	function startPlay() {
		// data.audioPause = false;

		// if (data.isVideoPause == false) {
		// 	uni.createVideoContext(data.videoGuid, instance).pause(); //执行暂停 
		// }
	}

	function pausePlay() {
		// data.audioPause = true;
	}

	function endedPlay() {
		// data.audioPause = true;
	}

	function imgPreview(url) {
		uni.previewImage({
			current: 0,
			urls: [url],
		});
	}
</script>

<template>
	<view>

		<scroll-view scroll-y class="main dialogue-box" :scroll-top="data.scrollTop" :scroll-with-animation="false"
			@scrolltolower="scrolltolower" @scroll="scroll" style="height: 100vh;">
			<view class="dialogue-box-content">

				<uni-header />
				<view class="header">

					<uni-icons class="back" type="back" @click="goBack" size="24" color="#828282"></uni-icons>
					<image :src="data.courseInfo.image || '/static/icon/function3.jpg'" mode="aspectFit" />
					<view class="mainTitle">
						<text style="font-size: 20rpx;">{{ data.courseInfo.title }}\n</text>
						<text>{{ data.courseInfo.subtitle }}</text>
					</view>

				</view>

				<view class="video_content" v-if="data.courseInfo.top_video">
					<image class="video" v-if="!!data.courseInfo.top_video && data.isVideoPlay == false"
						:src="data.courseInfo.top_video_image" @click="videoPlay(data.videoGuid)" mode="scaleToFill" />

					<video :id="data.videoGuid" v-else-if="data.courseInfo.top_video && data.isVideoPlay == true"
						class="video" :src="data.courseInfo.top_video" object-fit="fill" :show-fullscreen-btn="false"
						:controls="true" :custom-cache="false" autoplay @play="videoOnPlay" @pause="videoOnPause"
						@ended="videoOnEnded" />

					<image v-if="!!data.courseInfo.top_video && data.isVideoPlay == false"
						src="/static/common/bofang.svg" @click="videoPlay(data.videoGuid)"
						style="position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 99;margin: auto; width: 100rpx; height: 100rpx;">
					</image>
				</view>

				<view v-if="data.courseInfo.audio_duration">
					<!-- <button @click="listeverButtonPlay">播放</button> -->
					<!-- <uni-player v-if="data.courseInfo.audio_url" :src="data.courseInfo.audio_url" /> -->

					<uni-bgPlayer ref="bgPlayer" v-model="data.courseInfo" @startPlay="audioOnPlay"
						@pausePlay="audioOnPause"></uni-bgPlayer>
				</view>

				<view class="sub-content" v-if="data.courseInfo.audio_url">
					<view class="">
						<text>请务必观看以上视频 用心感受 用脑理解
							之后在你的血清素足够 头脑足够清醒的第一时间 独自一人完整收听以上音频
							并配合音频下方IVMCR创始人敬雄占祖 亲自编写的逐字稿与图片来深度理解内化音频内容
							再去开启你的当天定制 你将彻底跑赢你的对手与竞争者
							请不要持续沦丧自己 你 将不负众望</text>
					</view>

					<view style="padding-top: 20rpx;">
						<text>Please be sure that when you watch the video above you will feel it fully with your heart
							and
							understand it clearly with your mind.
							Afterwards, as soon as your serotonin levels are high enough and your mind is clear enough,
							listen to
							the above audio alone in its entirety.
							And in conjunction with the audio below, IVMCR founder Jingxiong Zhanzu personally wrote a
							verbatim
							manuscript and images for you to deeply understand and internalize the audio content
							Go ahead and customize your day again, and you will completely outperform your opponents and
							competitors.
							Please stop losing yourself. You will live up to all expectations.</text>
					</view>
				</view>
				<view style="padding: 30rpx 38rpx;">
					<view v-for="(item,index) in data.list" :key="index">
						<u-image :src="item" :lazy-load="true" :fade="true" duration="450" mode="widthFix" width="100%"
							@touchstart="preventSave" @longpress="preventSave" class="no-long-press"
							style="width:100%;height:auto; display:block;" :show-menu-by-longpress="false"
							@click="imgPreview(item)"></u-image>
					</view>
				</view>
			</view>
		</scroll-view>

		<view v-if="data.old.scrollTop>10" style="
		position:fixed; 
		bottom: 20px; 
		right: 20px;  
		border-radius: 50%; 
		width: 28px;
    height: 28px;
	background-color: #e1e1e1;
	color: #606266;
	display: flex;
	justify-content: center;" @click="goTop"><u-icon name="arrow-up"></u-icon></view>
	</view>
	<!-- <rich-text class="article" :nodes="data.mainContent"></rich-text> -->

	<!-- <embed src="/static/cs.pdf" type="application/pdf" width="100%" height="100%"></embed> -->

	<!-- <web-view src="https://vedio.soullightstheworld.com/ivmcr/article/1-6.pdf"></web-view> -->

	<!-- 	<u-parse class="article" :preview="false" :lazy-load="false"
			loading-img=""
			:html="data.courseInfo.details" :use-cache="true" :show-with-animation="true"></u-parse> -->

	<!-- 					<u-parse class="article" :preview="false" :lazy-load="false"
				loading-img=""
				:html="data.mainContent" :use-cache="true" :show-with-animation="true"></u-parse> -->

	<!-- 		<web-view :webview-styles="webviewStyles" :style="{width:'100vw',}" :src="data.webviewUrl"
			@message="handleMessage"></web-view> -->


	<!-- <rich-text class="article" :nodes="data.courseInfo.details" /> -->
</template>

<style lang="scss" scoped>
	.video_content {
		position: relative;
		margin-bottom: 80rpx;
	}

	image {
		-webkit-user-select: none;
		user-select: none;
	}

	.no-long-press {
		-webkit-touch-callout: none;
		/* 禁止触发长按操作 */
	}

	.main {
		height: 100vh;
		overflow: auto;
	}

	.sub-content {
		margin: 0 auto 50rpx;
		width: 654rpx;

		color: #6f6f6f;
		font-size: 16rpx;
		font-weight: 600;
		line-height: 1.4;
		text-align: left;
	}

	//默认左右宽度
	.u-content {
		padding: 30rpx 38rpx;

		:deep(.zp-l-text-rpx) {
			font-size: 18rpx;
		}

		// .article {
		// 	display: block;
		// 	// padding: 30rpx 38rpx;
		// 	color: #6f6f6f;
		// 	font-size: 16rpx;
		// 	font-weight: 600;
		// 	line-height: 1.2;
		// 	text-align: left;

		// 	white-space: normal;
		// 	/* 允许换行 */

		// 	overflow-wrap: break-word;
		// 	/* 强制换行长单词 */
		// 	word-break: break-all;
		// 	/* 强制在任何字符处断开 */
		// }

		// .article img {
		// 	display: block;
		// 	/* 使图片成为块级元素 */
		// 	margin: 0 auto;
		// 	/* 左右外边距自动，居中对齐 */
		// 	max-width: 100%;
		// 	/* 限制图片最大宽度 */
		// 	height: auto;
		// 	/* 保持纵横比 */
		// }
	}

	.header {
		margin-top: 50rpx;
		margin-bottom: 88rpx;
		display: flex;
		align-items: center;

		>image {
			width: 87rpx;
			height: 87rpx;
		}

		.mainTitle {
			color: rgb(0, 0, 0);
			font-size: 15rpx;
			font-weight: 600;
			line-height: 1.2;
			text-align: left;
		}

		.back {
			text-align: right;
			width: 60rpx;
			padding: 20rpx;
			// width: 22rpx;
			// height: 22rpx;
		}
	}

	.video {
		display: block;
		margin: 0 auto;
		width: 750rpx;
		height: 450rpx;
	}

	// .article img{
	// 	display: block;  /* 使图片成为块级元素 */
	// 	    margin: 0 auto; /* 左右外边距自动，居中对齐 */
	// 	    max-width: 100%; /* 限制图片最大宽度 */
	// 	    height: auto;    /* 保持纵横比 */
	// }
</style>